<#include "/common/dialogbox.html">
<@header>
</@header>
<@body>
<div class="x_content">
	<div class="" role="tabpanel" data-example-id="togglable-tabs">
	  <ul id="select-tabs" class="nav nav-tabs bar_tabs" role="tablist">
	    <li role="presentation" class="active" data-formId ="addDirForm">
	    	<a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">添加目录</a>
	    </li>
	    <li role="presentation" data-formId ="addMenuForm">
	    	<a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">添加菜单</a>
	    </li>
	    <li role="presentation" data-formId ="addActionForm">
	    	<a href="#tab_content3" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">添加功能</a>
	    </li>
	  </ul>
	  <div id="myTabContent" class="tab-content">
	    <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
			<div class="row">
		  		<div class="col-md-12 col-sm-12 col-xs-12">
				  	<form role="form" method="post" action="${ctx}/system/menu/doAddDir" id="addDirForm" class="form-horizontal form-label-left">
				       <div class="form-group">
				         	<label class="control-label col-md-2 col-sm-2 col-xs-12">
				         		目录名称 <span class="required">*</span>
			         		</label>
				         	<div class="col-md-9 col-sm-9 col-xs-12">
				        		<input type="text" name="menuName" class="form-control" placeholder="请输入目录名称"  required>
				        	</div>
				       </div>
				       <div class="form-group">
				         	<label class="control-label col-md-2 col-sm-2 col-xs-12">
				         		目录排序 <span class="required">*</span>
			         		</label>
				         	<div class="col-md-9 col-sm-9 col-xs-12">
				        		<input type="text" name="sort" class="form-control" placeholder="请输入排序" required>
				        		<span class="help-block m-b-none"><i class="fa fa-info-circle"></i>第一层级目录顺序</span>
				        	</div>
				       </div>
				       <div class="form-group">
				         	<label class="control-label col-md-2 col-sm-2 col-xs-12">
				         		目录图标 <span class="required">*</span>
			         		</label>
				         	<div class="col-md-9 col-sm-9 col-xs-12">
				         		<span class="form-control">当前图标为：<i id="dirIcon" class="fa fa-folder"></i>
									<a href="javascript:void(0);" onclick="selectIcon(1)" class="pull-right">
										 点击选取图标
									</a>
								</span>
				        		<input type="hidden" id="folderIcon" name="icon" value="fa fa-folder" class="form-control">
				        	</div>
				       </div>
			 		</form>
				</div>
			</div>
	    </div>
	    <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
	      	<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<form role="form" method="post" action="${ctx}/system/menu/doAddMenu" id="addMenuForm" class="form-horizontal form-label-left">
			       	  	<div class="form-group">
				          	<label class="control-label col-md-2 col-sm-2 col-xs-12">
				          		父级目录 <span class="required">*</span>
							</label>
							<div class="col-md-9 col-sm-9 col-xs-12">
								<select name="pid" class="form-control select2" style="width: 100%;" required>
									<option value="" selected="selected">--请选择--</option>
									<#list list as m>
										<option value="${(m.id)!}">${(m.menuName)!}</option>
									</#list>
								</select>
							</div>
					  	</div>
					   	<div class="form-group">
					     	<label class="control-label col-md-2 col-sm-2 col-xs-12">
					     		菜单名称 <span class="required">*</span>
				     		</label>
				     		<div class="col-md-9 col-sm-9 col-xs-12">
					    		<input type="text" name="menuName" class="form-control" placeholder="请输入菜单名称" required>
				    		</div>
					   	</div>
					   	<div class="form-group">
					     	<label class="control-label col-md-2 col-sm-2 col-xs-12">
					     		菜单URL <span class="required">*</span>
				     		</label>
					     	<div class="col-md-9 col-sm-9 col-xs-12">
					    		<input type="text" name="url" class="form-control" placeholder="请输入菜单URL" required>
					    		<span class="help-block m-b-none"><i class="fa fa-info-circle"></i>左侧菜单跳转URL</span>
				    		</div>
					   	</div>
					   	<div class="form-group">
					     	<label class="control-label col-md-2 col-sm-2 col-xs-12">
					     		菜单排序 <span class="required">*</span>
				     		</label>
				     		<div class="col-md-9 col-sm-9 col-xs-12">
					    		<input type="text" name="sort" class="form-control" placeholder="请输入排序" required>
					    		<span class="help-block m-b-none"><i class="fa fa-info-circle"></i>第二层级菜单顺序</span>
				    		</div>
					   	</div>
					   	<div class="form-group">
					     	<label class="control-label col-md-2 col-sm-2 col-xs-12">
					     		菜单图标 <span class="required">*</span>
				     		</label>
				     		<div class="col-md-9 col-sm-9 col-xs-12">
				     			<span class="form-control">当前图标为：<i id="menuIcon" class="fa fa-file"></i>
									<a href="javascript:void(0);" onclick="selectIcon(2)" class="pull-right">
										 点击选取图标
									</a>
								</span>
								<input type="hidden" class="form-control" name="icon" id="fileIcon" value="fa fa-file">
				    		</div>
					   	</div>
					</form>
				</div>
			</div>
	    </div>
	    <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">
	      	<div class="row">
				<div class="col-md-12 col-sm-12 col-xs-12">
					<form role="form" method="post" action="${ctx}/system/menu/doAddAction" id="addActionForm" class="form-horizontal form-label-left">
			    		<div class="form-group">
							<label class="control-label col-md-2 col-sm-2 col-xs-12">
					         	父级目录 <span class="required">*</span>
							</label>
							<div class="col-md-9 col-sm-9 col-xs-12">
					         	<select id="dir" class="form-control select2" style="width: 100%;" required>
							     	<option value="" selected="selected">--请选择--</option>
							     	<#list list as m>
							     	<option value="${(m.id)!}">${(m.menuName)!}</option>
							     	</#list>
							  	</select>
						  	</div>
						 </div>
						 <div class="form-group">
							<label class="control-label col-md-2 col-sm-2 col-xs-12">
								上级菜单 <span class="required">*</span>
							</label>
							<div class="col-md-9 col-sm-9 col-xs-12">
				   			  	<select id="pid" name="pid" class="form-control select2" style="width: 100%;" required>
							  	</select>
						  	</div>
						 </div>
					     <div class="form-group">
					       	<label class="control-label col-md-2 col-sm-2 col-xs-12">
					       		按钮名称 <span class="required">*</span>
				       		</label>
				       		<div class="col-md-9 col-sm-9 col-xs-12">
					      		<input type="text" name="menuName" class="form-control" placeholder="请输入目录名称" required>
					      	</div>
					     </div>
					     <div class="form-group">
					       	<label class="control-label col-md-2 col-sm-2 col-xs-12">
					       		权限标识 <span class="required">*</span>
				       		</label>
				       		<div class="col-md-9 col-sm-9 col-xs-12">
					      		<input type="text" id="resource" name="resource" class="form-control" placeholder="请输入权限资源名称" required check-url="${ctx}/system/menu/checkMenuResource">
					      		<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限标识，如：@RequiresPermissions("")</span>
					      	</div>
					     </div>
					     <div class="form-group">
					       	<label class="control-label col-md-2 col-sm-2 col-xs-12">
					       		按钮排序 <span class="required">*</span>
				       		</label>
				       		<div class="col-md-9 col-sm-9 col-xs-12">
					      		<input type="text" name="sort" class="form-control" placeholder="请输入排序" required>
					      		<span class="help-block m-b-none"><i class="fa fa-info-circle"></i>第三层级按钮顺序</span>
					      	</div>
					     </div>
					 </form>
				</div>
			</div>
	    </div>
	  </div>
	</div>
</div>
</@body>
<@footer>
<script type="text/javascript">
$("#dir").on('change',function(){
	var pid = $(this).val();
	 $.post('/system/menu/json?_dc='+new Date().getTime(),{pid:pid},function(response){
		if(response.code==200){
			$("#pid").empty();
			$("#pid").select2({
				data:response.data
			});
		}
	});
});

/* 选取图标 */
function selectIcon(type){
	var layerIndex = parent.layer.getFrameIndex(window.name);
	parent.layer.open({
		type : 2,
		title : '选取图标',
		closeBtn : 1,
		anim: -1,
		isOutAnim: false,
		shadeClose : true,
		shade : 0.3,
		area : ['95%', '90%'],
		content : '/system/menu/toicon',
		btn : [ '确定', '取消' ],
		yes : function(index, layero) {
			var iframeWin = layero.find('iframe')[0];
			iframeWin.contentWindow.submitHandler(index,layero);
		},
		success: function(layero, index){
			var body = parent.layer.getChildFrame('body', index);
			body.find("#sid").attr("iconType", type + "," + layerIndex);
		}
	});
}

function submitHandler() {
	var fromId = $("#select-tabs").find(".active").attr("data-formId");
	var formObject = $("#"+fromId);
	if (formObject.validate().form()) {
		var formData = formObject.serialize();
		var index = layer.load(3);
		$.ajax({
			url: formObject.attr('action'),
			type: 'POST',
			dataType : "json",
			data: formData,
			success: function (data) {
			layer.close(index);
 				if (data.code == 200) {
 					if(data.msg){
 						parent.layer.msg(data.msg, {icon : 1});
 					}else{
 						parent.layer.msg('提交成功', {icon : 1});
 					}
 					window.parent.location.reload();
 					parent.layer.closeAll('iframe'); // 关闭当前frame
 				} else {
 					layer.msg(data.msg, {icon : 2 });
 				}
			}
		});
	}
}
</script>
</@footer>
